<template>
   <div class="main-page">
  <el-row :gutter="24" class="top">
   <el-col :span="18">
    <el-row>
     <el-col :span="12" class="order" style="padding-left: 10px; padding-right: 10px;">
      <div class="title">
       <h3>工单统计</h3>
       <span class="time">2023.4.1 ~ 2023.04.15</span>
      </div>
      <div class="number">
       <!-- 工单总数 -->
       <div class="totalorder">
        <h3>{{total}}</h3>
        <span>总工单数</span>
       </div>
       <div class="totalorder">
        <h3> {{completedTotal}} </h3>
        <span>完成工单</span>
       </div>
       <div class="totalorder">
        <h3>{{progressTotal}}</h3>
        <span>进行工单</span>
       </div>
       <div class="totalorder">
        <h3>{{cancelTotal}}</h3>
        <span>取消工单</span>
       </div>
      </div>
     </el-col>
     <!-- 销售统计 -->
     <el-col :span="12" class="cell">
      <div class="title">
       <h3>销售统计</h3>
       <span class="time">2023.4.1 ~ 2023.04.15</span>
      </div>
      <div class="number number-right">
        <div class="totalorder totalorder-right">
        <h3>{{orderNum}}</h3>
        <span class="mini">订单量 (个)</span>
       </div>
        <div class="totalorder totalorder-right">
        <h3>{{(orderSale / 1000000).toFixed(2)}}</h3>
        <span class="mini">销售额 (万元)</span>
       </div>
      </div>
     </el-col>
    </el-row>
    <!-- echarts部分 -->
    <el-row class="celldata">
      <div class="sku-sale-collect">
        <div class="header">
          <div class="title">
            <h3>销售数据</h3>
            <span class="time">2023.4.1 ~ 2023.04.15</span>
          </div>
          <!-- 周月年按钮 -->
          <div class="date">
            <div class="item" v-for="(item, index) in dateList"
              :key="index"
              :class="{active: isActive === index}"
              @click="changeClass(index)">{{item}}</div>
          </div>
        </div>
        <div class="charts">
          <div class="sellInfo" ref="sellLeft"></div>
          <div class="sellInfo" ref="sellRight"></div>

        </div>
      </div>
    </el-row>
   </el-col>
   <!-- 商品热榜TOP -->
   <el-col :span="6" class="goods">
     <div class="title">
       <h3>销售热榜</h3>
       <span class="time">2023.4.1 ~ 2023.04.15</span>
      </div>
    <template v-for="(item,index) in topList">
      <el-row class="hotRow" :key="index">
        <el-col class="img" :span="4">
          <div class="top" :class=" 'top' + (index + 1) ">
            {{index + 1}}
          </div>
        </el-col>
        <el-col :span="16">{{item.skuName}}</el-col>
        <el-col :span="4" class="dan">{{item.count}}单</el-col>
  </el-row>
    </template>
   </el-col>
  </el-row>
  <!-- 下半部 -->
  <el-row :gutter="20" style=" margin-top: 20px;padding:10px; ">
 <el-col :span="14">
   <div class="leftCount">
  <el-row :gutter="20">
  <div class="header">
   <div class="title">
   合作商点位数Top5
   </div>
   <i class="el-icon-more more" size="mini" />
    </div>
   <el-row style="margin-top:30px">
   <el-col :span="15">
    <div class="chart-box" style="height: 278px">
   <div ref="box2" class="chart-box" style="width:400px;height:278px"></div>
   </div>
   </el-col>
   <el-col :span="5" class="countbox">
     <el-row class="countTitle">16</el-row>
     <el-row class="text">点位数</el-row>
     <el-row class="countTitle">5</el-row>
     <el-row class="text">合作商数</el-row>
   </el-col>
   </el-row>
  </el-row>
  </div>
 </el-col>
 <el-col :span="10">
  <div class="rightCount">
  <el-row>
   <div class="header">
   <div class="title">
   异常设备监控
  </div>
   <i class="el-icon-more more" size="mini" />
  </div>
  </el-row>
   <div class="wu">
      <el-row>
   <div class="pic">
    <img src="https://likede2-admin.itheima.net/img/empty.87c4f71b.png" alt="">
   </div>
  </el-row>
  <el-row>
   <div class="txt">
    暂无数据
   </div>
  </el-row>
   </div>
  </div>
 </el-col>
 </el-row>
 </div>
</template>

<script>
import { taskReportInfo, getOrderNum, goodsTop, getOrderSale } from '@/api/likeDe'
import * as echarts from 'echarts'
export default {
  data () {
    return {
      start: '2023-04-01 00:00:00',
      end: '2023-04-16 23:59:59',
      goodsTop: { start: '2023-04-01', end: '2023-04-17', topValue: 10 },
      ordersInfo: [], // top订单信息
      orderNum: null, // 订单量
      orderSale: null, // 销售额
      topList: [], // 热门列表商品
      total: null, // 工单总数
      completedTotal: null, // 完成工单
      progressTotal: null, // 进行工单
      cancelTotal: null, // 取消工单
      dateList: ['周', '月', '年'],
      isActive: 0
    }
  },
  mounted () {
    // 调用获取工单统计数据的方法
    this.getTaskInfo()
    // 调用销售统计订单量
    this.getOrderNumFn()
    // 调用销售额
    this.getOrderSale()
    // 销售热榜top商品
    this.goodsTopFn()
    // echarts 图左部分
    const chartDom1 = this.$refs.sellLeft
    const myChart1 = echarts.init(chartDom1)
    const option1 = {
      title: {
        text: '销售额趋势图',
        left: 'center', // 居中
        top: 10 // 标题距离顶部10像素
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        boundaryGap: false, // x轴从0点开始
        data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '销售额',
          type: 'line',
          smooth: true,
          lineStyle: {
            width: 2,
            color: 'red'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(255, 158, 68, 0.8)'
              },
              {
                offset: 1,
                color: 'rgba(255, 70, 131, 0.3)'
              }
            ])
          },
          data: [2629.1, 4356.05, 5343.29, 5514.47, 3777.59, 5906.59, 0]
        }
      ]
    }
    option1 && myChart1.setOption(option1)
    // echarts 图右部分
    const chartDom2 = this.$refs.sellRight
    const myChart2 = echarts.init(chartDom2)
    const option2 = {
      title: {
        text: '销售额分布'
      },
      // tooltip: {},
      xAxis: {
        data: ['北京平', '霍营街']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          barWidth: '10%',
          data: [23559.49, 3089.21]
        }
      ]
    }
    option2 && myChart2.setOption(option2)

    // 饼状图
    const myChart3 = echarts.init(this.$refs.box2)
    myChart3.setOption({
      series: [
        {
          type: 'pie',
          data: [
            {
              value: 10,
              name: '金燕龙合作商'
            },
            {
              value: 2,
              name: '天华物业'
            },
            {
              value: 2,
              name: '北京合作商'
            },
            {
              value: 1,
              name: 'likede'
            },
            {
              value: 1,
              name: '佳佳'
            }
          ],
          radius: ['25%', '70%']
        }
      ]
    })
  },
  methods: {
    // 封装获取工单数据的方法
    async getTaskInfo () {
      const { start, end } = this
      const res = await taskReportInfo({ start, end })
      this.ordersInfo = [...res.data]
      for (let i = 0; i < this.ordersInfo.length; i++) {
        this.total += this.ordersInfo[i].total
        this.completedTotal += this.ordersInfo[i].completedTotal
        this.progressTotal += this.ordersInfo[i].progressTotal
        this.cancelTotal += this.ordersInfo[i].cancelTotal
      }
    },
    async getOrderNumFn () { // 封装订单统计中订单量
      const { start, end } = this
      const { data } = await getOrderNum({ start, end })
      this.orderNum = data
    },
    async getOrderSale () { // 封装订单统计中销售额
      const { start, end } = this
      const { data } = await getOrderSale({ start, end })
      this.orderSale = data
    },
    async goodsTopFn () { // 封装商品热榜
      const res = await goodsTop(this.goodsTop)
      this.topList = res.data
    },
    changeClass (index) { // 动态添加类名
      this.isActive = index
    }
  }

}
</script>

<style lang="less" scoped>
.main-page{
width: 1320px;
background-color: #f8fafd;
}
.top {
 // background: green;
 height: 540px;
 .order {
  width: 535px;
  height: 166px;
  background: #e9f3ff;
    background-image: url('https://likede2-admin.itheima.net/img/task.66b715b7.png');
    background-repeat: no-repeat;
    background-position: 410px 50px,calc(100% - 12px) 100%;
  border-radius: 20px;

 }
   .title{
   display: flex;
   align-items: center;
   padding-left: 10px;
   padding-top: 20px;
   h3{
    font-size: 16px;
    font-weight: 600;
   }
   .time{
    margin-left: 10px;
    font-size: 12px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: #999;
   }
  }
  .number{
    display: flex;
    justify-content: center;
    align-items: center;
    .totalorder{
      margin-top: 15px;
      flex: 1;
      width: 122px;
      height: 107px;
      text-align: center;
      text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
      h3{
       height: 50px;
       font-size: 36px;
       font-family: PingFangSC-Semibold,PingFang SC;
       font-weight: 600;
       line-height: 50px;
      }
      span{
        height: 17px;
        margin-top: 3px;
        font-size: 12px;
        font-family: PingFangSC-Regular,PingFang SC;
        font-weight: 400;
        color: #91a7dc;
        line-height: 17px;
   }
    }
  }
 .cell {
  padding-left: 15px;
  width: 420px;
  height: 166px;
  border-radius: 20px;
  margin-left: 15px;
  background-image: url('https://likede2-admin.itheima.net/img/sale.606b0d8c.png');
  background-color: #fbefe8;
  background-repeat: no-repeat;
  background-position: 280px 60px,calc(100% - 12px) 100%
 }
 .celldata {
  width: 975px;
  height: 352px;
  border-radius: 20px;
  margin-top: 15px;
 }
 .goods {
  width: 317px;
  height: 538px;
  background-color: #fff;
  border-radius: 20px;
  .top{
    font-size: 12px;
  }
  .dan{
    font-size: 14px;
    color: #737589;
  }
 }
}
.number-right{
    display: flex;
  }
  .totalorder-right{
    color: #ff5757;
    text-shadow: 2px 4px 7px rgb(255 87 87 / 50%);
  }
.mini{
    color: #ff5757 !important;
    text-shadow: 2px 4px 7px rgb(255 87 87 / 50%) !important;
    }
.hotRow{
      margin-top: 25px;
      .img{
        background-image: url();
        width: 16px;
        height: 20px;
        margin-right: 20px;
        text-align: center;
      }
}
.top1{
  width: 21px;
  height: 20px;
  background: url();
  color: #cf6d3d;
}
.top2{
  width: 21px;
  height: 20px;
  background: url();
  color: #494949;
}
.top3{
  width: 21px;
  height: 20px;
  background: url();
  color: #cf6d3d;
}
// echarts部分
.sku-sale-collect{
  padding: 20px;
  width: 930px;
  height: 352px;
  background-color: #fff;
  border-radius: 20px;
  .header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 952px;
    height: 34px;
    background-color: #fff;
    .title{
      padding: 1px;
      font-size: 16px;
      color: #333333;
      width: 500px;
      height: 34px;
    }
  }
  .charts{
    display: flex;
    width: 952px;
    height: 278px;
    .sellInfo{
      flex: 1;
      width: 100%;
      height: 100%;
    }
  }
}
.date{
  margin-right: 15px;
   display: flex;
   padding-right: 20px;
   justify-content: end;
   align-items: center;
   width: 129px;
   height: 34px;
   background-color: #f7fbff;
   border-radius: 10px;
   .item{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 37px;
    height: 25px;
    font-size: 14px;
    color: #9ca3b4;
    cursor: pointer;
   }
   .active{
    background: #fff;
    box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
    border-radius: 7px;
    font-weight: 600;
    color: black;
}
}
.leftCount {
 padding: 20px;
 height: calc(40vh - 48px);
  min-height: 353px;
  background: #fff;
  border-radius: 20px;
  .title{
  font-size: 16px;
  font-weight: 600;
  color: #333;
 }
  .countbox{
  width: 154px;
  height: 230px;
  padding-top: 47px;
  padding-left: 38px;
  background: linear-gradient(135deg,transparent,#f8f8f9 0) 0 0,linear-gradient(-135deg,transparent 12px,#f8f8f9 0) 100% 0,linear-gradient(-45deg,transparent,#f8f8f9 0) 100% 100%,linear-gradient(45deg,transparent 12px,#f8f8f9 0) 0 100%;
  background-size: 50% 50%;
  background-repeat: no-repeat;
   .countTitle{
  height: 33px;
  font-size: 24px;
  font-family: PingFangSC-Semibold,PingFang SC;
  font-weight: 600;
  color: #072074;
  line-height: 33px;
  margin-top: 10px;
  font-weight: 700;
   }
   .text{
  height: 17px;
  margin-top: 6px;
  font-size: 12px;
  font-family: PingFangSC-Regular,PingFang SC;
  font-weight: 400;
  color: #000412;
  line-height: 17px;
  margin-bottom: 15px;
   }
  }
}
.rightCount {
  padding: 20px;
  height: calc(40vh - 48px);
  min-height: 353px;
  background: #fff;
  border-radius: 20px;
}
.title{
 font-size: 16px;
 font-weight: 600;
 color: #333;
}
  .header{
   display: flex;
   justify-content: space-between;
   .more {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 16px;
   height: 16px;
   border: #5f84ff 0.5px solid;
   font-size: 12px;
   border-radius:50%;
   color: #5f84ff;
   cursor: pointer;
  }
}
.wu{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 90px;
 .txt{
  margin-top: 25px;
  color: #20232a;
  font-size: 14px;
 }
}
</style>
